<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<html>
<head>
<base target="_self" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="application/x-www-form- urlencoded; charset=UTF-8" />  
<title>添加用户信息</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui/themes/icon.css"/>">
<link rel="Stylesheet" type="text/css"
	href="<c:url value="/static/css/jquery.ui.css"/>" />
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/jquery-1.6.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.panel.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.datagrid.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.messager.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/ext-for-framework.js.jsp"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/locale/easyui-lang-zh_CN.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/js/showMsg.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/listBox/jquery.clever.listbox.js"/>"></script>

<script type="text/javascript">
    //获取data 数据
    var dataLeft;
	function initList(listDisplayEId) {
		$('#' + listDisplayEId).datagrid({
			nowrap : false,
			striped : true,
			collapsible : true,
			remoteSort : true,
			notSelectByRow : false,
			frozenColumns : [ [ {
				field : 'ids',
				checkbox : true
			} ] ],
			toolbar : [],
			onLoadError : function() {
				$.messager.alert('错误', '获取数据失败，请与管理员联系！', 'error');
			}
		});
	};
	$(document).ready(function() {
		initList('listDisplay');
	});

	//添加信息按钮响应函数
	function addUser() {
		$('#AddUserForm').form('submit', {
			url : '<c:url value='/user/saveUser.do'/>', //查询提交路径
			onSubmit : function()//提交按钮相应函数
			{
				var password = $('#password').val();
				var password2 = $('#password2').val();
				if (password == null) {
					$.messager.alert("错误", "密码不能为空!", 'error');
					return false;
				} else if (password != password2) {
					$.messager.alert("错误", "密码两次输入不同!", 'error');
					return false;
				}
				
				if($('#levelId').combobox('getValue')!=0 &&$('#levelId').combobox('getValue')!=1){
					if(document.getElementById('higherUser').value ==0){
		                  $.messager.alert("错误", "此职位必须录入上级领导", 'error');
		                  return false;
					}
				}
				return $('#AddUserForm').form('validate');
			},
			success : function(data) {
				data = eval('(' + data + ')');
				if (data.success) {
					$.messager.alert("提示", "添加成功！", 'info');
					window.close();
				} else {
					$.messager.alert("提示", data.msg, 'warning');
				}
			},
			error : function() {
				$.messager.alert("错误", "系统错误，请联系管理员！", 'error');
				return;
			}
		});

	}

	$(function() {
		$("#higherUserName").textbox({
			buttonText:'查询',    
		    iconCls:'icon-man', 
		    iconAlign:'left',
		    editable:false,
		    value: "无",
		    onClickButton:function(){
		    	////校验
		        if($('#levelId').combobox('getValue')==1){
		            $.messager.alert("错误", "此职位不需要录入上级领导", 'error');
		            return false;
		        }else{
		            var levelIdcopy =  $('#levelId').combobox('getValue');
		            document.getElementById('levelIdcopy').value = levelIdcopy;
		        }
		    	
		    	var levelId = $('#levelId').combobox('getValue');
		    	initDateLeft(levelId);
		    	showMsgLeft();
			    ShowDiv();
			    //
			    var left = $('#left').listbox();
	            var items = left.getSelected();
	            left.removeRange(items);

	            var right = $('#right').listbox();
	            var itemsr = right.getSelected();
	            right.removeRange(itemsr);

	            $('#left').listbox().reload({
	                data : dataLeft,
	                ajaxsettings : {
	                    data : {
	                        id : 'a'
	                    }
	                }
	            });
	        }
		});
		$('#levelId').combobox({
            url : '<c:url value='/user/userLevelPullDown.do'/>' + '?space=0',
			editable : true, //不可编辑状态  
			cache : false,
			panelHeight : '150',
			valueField : 'levelId',
			textField : 'levelName'
		});
		$('#levelId').combobox('setValue',1);
		
		$('#userlevel').combobox({
            url : '<c:url value='/user/userLevelPullDown.do'/>' + '?space=0',
            editable : true, //不可编辑状态  
            cache : false,
            panelHeight : '150',
            valueField : 'levelId',
            textField : 'levelName',
            required : true
        });
		$('#province').combobox({
			url : '<c:url value='/user/pullDownProvince.do'/>',
			editable : true, //不可编辑状态  
			cache : false,
			panelHeight : '150',
			valueField : 'areaid',
			textField : 'name',
			required : true,
			onChange : function(newValue, oldValue) {
				$.post('<c:url value='/user/pullDownCity.do'/>', {
					parentId : newValue
				}, function(data) {
					$('#city').combobox("clear").combobox('loadData', data);
				}, 'json');
			}
		});
		$('#city').combobox({
			valueField : 'areaid',
			textField : 'name',
			editable : false,
			url : '<c:url value='/user/pullDownCity.do'/>',
			onChange : function(newValue, oldValue) {
				$.post('<c:url value='/user/pullDownCountry.do'/>', {
					parentId : newValue
				}, function(data) {
					$('#country').combobox("clear").combobox('loadData', data);
				}, 'json');
			}
		});
		$('#country').combobox({
			url : '<c:url value='/user/pullDownCountry.do'/>',
			valueField : 'areaid',
			textField : 'name',
			editable : false
		});
		//隐藏div界面
		$('#provinceShow').combobox(
				{
					url : '<c:url value='/user/pullDownProvince.do'/>' +'?space=1',
					editable : true, //不可编辑状态  
					cache : false,
					panelHeight : '150',
					valueField : 'areaid',
					textField : 'name',
					required : true,
					value:0,
					onChange : function(newValue, oldValue) {
						$.post('<c:url value='/user/pullDownCity.do'/>'+'?space=1', {
							parentId : newValue
						}, function(data) {
							$('#cityShow').combobox("clear").combobox(
									'loadData', data);
							$('#cityShow').combobox('setValue',0);
						}, 'json');
					}
				});
		$('#cityShow').combobox(
				{
					valueField : 'areaid',
					textField : 'name',
					editable : false,
					url : '<c:url value='/user/pullDownCity.do'/>'+'?space=1',
					value:0,
					onChange : function(newValue, oldValue) {
						$.post('<c:url value='/user/pullDownCountry.do'/>'+'?space=1', {
							parentId : newValue
						}, function(data) {
							$('#countryShow').combobox("clear").combobox(
									'loadData', data);
							$('#countryShow').combobox('setValue',0)
						}, 'json');
					}
				});
		$('#countryShow').combobox({
			url : '<c:url value='/user/pullDownCountry.do'/>'+'?space=1',
			valueField : 'areaid',
			textField : 'name',
			value:0,
			editable : false
		});
	});
    
	function ShowDiv() {
		var Allwidth = '100%';
		var Allheight = '100%';
		document.getElementById('zzy').style.display = '';
		Loading.Show({
			width : Allwidth,
			height : Allheight
		});
		///$("#materType1").combo("resize")
		//pulldown();
		//$("#materType1").combobox("resize");

		//$('#materType1').combobox('reload'); 
		//$('#materType1').combobox('reset'); 

	}

	
	//初始化showMsg
    function initDateLeft(levelId){
    	$.ajax({
		    async : false,
		    url : "<c:url value='/user/userlevel.do'/>" +"?levelIdcopy="+levelId+"&companyUser=${companyUser }",
		    type : "post",
		    success : function(data) {
			    dataLeft = data;
			    if (typeof (dataLeft) == 'string' && dataLeft!='') {
			        	dataLeft = JSON.parse(dataLeft);
			    }
		    }
    	});
	}
	function showMsgLeft() {
		$('#left').listbox({
			data : dataLeft,
			height : 300,
			width : 200,
			dndscope : 'demo',
			dnd : false,
			multiselect : true,
			selectchange : function(data) {
				if (data && data.length > 0) {
					$('#btnRight').attr('disabled', false);
				} else {
					$('#btnRight').attr('disabled', true);
				}
			}
		});
		var data = [ {
			value : 10,
			text : 'think8848'
		}, {
			value : 20,
			text : 'aCloud'
		}, {
			value : 21,
			text : 'aaaaa'
		}, {
			value : 36,
			text : 'qqqqq'
		} ];
		$('#right').listbox({
			//data: data,
			height : 300,
			width : 200,
			dndscope : 'demo',
			dnd : true,
			multiselect : true
		});
		$('#btnRightAll').click(function() {
			var left = $('#left').listbox();
			var items = left.getDatas();
			left.clear();
			$('#right').listbox().addRange(items);
		});
		$('#btnLeftAll').click(function() {
			var right = $('#right').listbox();
			var items = right.getDatas();
			right.clear();
			$('#left').listbox().addRange(items);
		});
		$('#btnRight').click(function() {
			var left = $('#left').listbox();
			var items = left.getSelected();
			left.removeRange(items);
			$('#right').listbox().addRange(items);
		});
		$('#btnLeft').click(function() {
			var right = $('#right').listbox();
			var items = right.getSelected();
			right.removeRange(items);
			$('#left').listbox().addRange(items);
		});
		$('#btnRemove').click(function() {
			$('#right').listbox().removeRange([ {
				value : 2
			}, {
				value : 26
			} ]);
		});
		$('#btnSelect').click(function() {
			var selected = $('#right').listbox().getSelected();
			var msg = 'Selected count is: ' + selected.length;
			if (selected.length > 0) {
				msg += ', The first item text is: ' + selected[0].text;
			}
			msg += '.';
			alert(msg);
		});
		$('#btnGetItems').click(function() {
			var selected = $('#right').listbox('getDatas');
			alert('Items count is: ' + selected.length);
		});
		$('#btnSetSelection').click(function() {
			$('#left').listbox('setSelection', 1);
		});
		$('#btnReload').click(function() {
			var left = $('#left').listbox();
			var items = left.getSelected();
			left.removeRange(items);

			var right = $('#right').listbox();
			var itemsr = right.getSelected();
			right.removeRange(itemsr);

			$('#left').listbox().reload({
				data : datal,
				ajaxsettings : {
					data : {
						id : 'a'
					}
				}
			});
		});
		$('#select').click(function() {
			Loading.Hide();
			document.getElementById('zzy').style.display = 'none';

			var right = $('#right').listbox();
			var items = right.getDatas();
			var userNames = '';
			var userIds = '';
			if(items.length >1){
				alert("上级领导只能选取一位！");
				return ;
			}
			for ( var e in items) {
				userNames = userNames + items[e].text ;
				userIds = userIds + items[e].value ;
			}
			if (userNames != '' && userIds != '') {
				$('#higherUserName').textbox('setValue', userNames);
				document.getElementById('higherUser').value = userIds;
			} else {
                $('#higherUserName').textbox('setValue', '无');
				document.getElementById('higherUser').value = 0;
			}

		});
		$('#noselect').click(function() {
			Loading.Hide();
			document.getElementById('zzy').style.display = 'none';
		});
	}
	
	function searchInfo(){
		$('#searchForm').form('submit',
            {
                url:'<c:url value='/user/userlevelChina.do'/>', //查询提交路径
                onSubmit:function()//提交按钮相应函数
                    {
                        return $('#searchForm').form('validate');
                    },
                success:function(data){
                    data = eval( "("+data+")" );
                    var left = $('#left').listbox();
                    var items = left.getSelected();
                    left.removeRange(items);

                    var right = $('#right').listbox();
                    var itemsr = right.getSelected();
                    right.removeRange(itemsr);

                    $('#left').listbox().reload({
                        data : data,
                        ajaxsettings : {
                            data : {
                                id : 'a'
                            }
                        }
                    });
                },
                error:function(){
                    $.messager.alert("错误", "系统错误，请联系管理员！", 'error');
                    return;
                }
            }
		);
	}
</script>
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<body>
	<table width="90%" align="center">
		<tr></tr>
		<tr>
			<td>

				<div style="height: auto; background: #fafafa; padding: 5px;"
					class="easyui-panel" title="添加用户信息" iconCls="icon-save"
					collapsible="true" minimizable="false" maximizable="false"
					closable="false">

					<form id="AddUserForm" name="AddUserForm" method="post">
						<table cellpadding="5">
							<tr>
								<td>登录用户名:</td>
								<td><input class="easyui-textbox" type="text"
									name="userName" required="true" validType="length[1,30]" /></td>
								<td>姓名:</td>
                                <td><input class="easyui-textbox" type="text"
                                    name="realName" required="true" validType="length[1,100]" /></td>
							</tr>
							<tr>
							    <td>密码:</td>
                                <td><input class="easyui-textbox" type="password"
                                    id="password" required="true" validType="length[1,100]"
                                    name="password" /></td>
								<td>确认密码:</td>
								<td><input class="easyui-textbox" type="password"
									id="password2" required="true" validType="length[1,100]"
									name="password2" /></td>
							</tr>
							<tr>
								<td>机构编码:</td>
								<td><input class="easyui-textbox" type="text"
									name="organId" /></td>
								<td>邮箱:</td>
								<td><input class="easyui-textbox" type="email"
									name="email" validType="email" validType="length[1,100]" /></td>
							</tr>
							<tr>
								<td>电话:</td>
								<td><input class="easyui-numberbox" type="userPhone"
									name="userPhone" required="true" data-options="validType:'length[11,11]'"  /></td>
							</tr>

							<tr>
								<td>是否有效:</td>
								<td><select class="easyui-combobox" name="isActive">
										<option value="0">有效</option>
										<option value="1">失效</option>
								</select></td>
							</tr>

							<tr>
								<td>省:</td>
								<td><input class="easyui-combobox" name="province"
									id="province" required="true" /></td>
							</tr>

							<tr>
								<td>市:</td>
								<td><input class="easyui-combobox" name="city" id="city"
									required="true" /></td>
							</tr>

							<tr>
								<td>区:</td>
								<td><input class="easyui-combobox" name="country"
									id="country" required="true" /></td>
							</tr>
							<tr>
								<td>本人职位:</td>
								<td><input class="easyui-combobox" name="levelId" id="levelId"  /></td>
								<td>上级领导</td>
                                <td><input class="easyui-textbox" name="higherUserName" id="higherUserName" /></td>
                                <td><input class="easyui-validatebox" type="hidden" name="higherUser" id="higherUser" value="0" /></td>
							</tr>

						</table>
						<br> <br>
						-----------------------页面角色选择----------------------------<br>
						<br>
						<c:forEach var="role" items="${rolelist}" varStatus="st">
							<input class="easyui-validatebox" type="checkBox" name="roles"
								value="${role.roleId }">${role.roleName }</input>
							<c:if test="${st.count % 5 == 0}">
								<br>
								<br>
							</c:if>

						</c:forEach>
						<br> <br> <a class="easyui-linkbutton"
							onclick="addUser()">添加</a>
					</form>

				</div>
			</td>
		</tr>
	</table>
	<div
		style='position: absolute; left: 40px; top: 40px; z-index: 101; display: none; background-color: #FFFFFF; border-radius: 10px; width: 550px;'
		id="zzy">
		<table align="center">
			<tr>
				<td colspan="3">
				    <form id="searchForm" name="searchForm" method="post" accept-charset="UTF-8">
					<div
						style="height: auto; width: 470px; background: #fafafa; padding: 5px;"
						class="easyui-panel" title="查询" iconCls="icon-search"
						collapsible="true" minimizable="false" maximizable="false"
						closable="false">
						<table>
							<tr>
								<td>省:</td>
								<td><input class="easyui-combobox" name="provinceShow"
									id="provinceShow" required="true" /></td>
								<td>市:</td>
								<td><input class="easyui-combobox" name="cityShow"
									id="cityShow" required="true" /></td>
							</tr>
							<tr>
								<td>区:</td>
								<td><input class="easyui-combobox" name="countryShow"
									id="countryShow" required="true" /></td>
							</tr>
							<tr>
								<td>职位:</td>
								<td><input class="easyui-combobox" name="userlevel"
									id="userlevel" required="true" /></td>
								<td colspan="2"><a href="#" class="easyui-linkbutton"
									data-options="iconCls:'icon-search'" style="width: 60px"
									onclick="searchInfo()">查询</a></td>
							</tr>
							<input class="easyui-validatebox" type="hidden" name="levelIdcopy" id="levelIdcopy"  />
							
						</table>
					</div>
					</form>
				</td>
			</tr>
			<tr>
				<td>
					<ul id="left">
					</ul>
				</td>
				<td><input type="button" value="&gt;&gt;" id="btnRightAll"
					style="width: 50px;" /><br /> <input type="button" value="&gt;"
					id="btnRight" style="width: 50px;" /><br /> <input type="button"
					value="&lt;" id="btnLeft" style="width: 50px;" /><br /> <input
					type="button" value="&lt;&lt;" id="btnLeftAll" style="width: 50px;" />
				</td>
				<td>
					<ul id="right">
					</ul>
				</td>
			</tr>
		</table>
		<table align="center">
			<tr>
				<!--  
                <td><input type="button" value="Add Item" id="btnAdd" /></td>
                <td><input type="button" value="Remove Item" id="btnRemove" /></td>
                <td><input type="button" value="Get Select" id="btnSelect" /></td>
                <td><input type="button" value="Get Items" id="btnGetItems" /></td>
                <td><input type="button" value="SetSelection (value equal to '1')" id="btnSetSelection" /></td>
                <td><input type="button" value="Reload" id="btnReload" /></td>
                -->
				<td><input type="button" value="取消" id="noselect" /></td>
				<td width="200px"></td>
				<td><input type="button" value="选择" id="select" /></td>

			</tr>
		</table>
	</div>
</body>
</html>